<template>
  <div class="GdwyyAppCard flex">
    <div
      class="item-box flex-center flex-column"
      v-for="(item, index) in list"
      :key="index + 'card'"
      :class="{ 'current-card': currentCard === item.value }"
      @click="handleChangeCard(item)"
    >
      <img
        class="item-icon"
        :src="require('../../../../../../assets/imgs/reconsitution/viewAllWorkOrders/' + item.icon + '.png')"
      />
      <div class="font-13 color333 item-label">
        {{ item.label }}
        <span v-if="showNum">: {{ dataModel[item.model] || 0}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GdwyyAppCard',
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      },
    },
    dataModel: {
      type: Object,
      default: () => {
        return {}
      },
    },
    showNum: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      currentCard: 1,
    }
  },

  watch: {
    list: {
      immediate: true,
      handler(nv, ov) {
        if (nv.length) {
          this.currentCard = nv[0].value
        }
      },
    },
  },

  methods: {
    handleChangeCard(item) {
      console.log('3e3', item)
      const { value } = item
      if (value === this.currentCard) return
      this.currentCard = value
      this.$emit('changeCard', item)
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';

.GdwyyAppCard {
  background: #fff;
  box-sizing: border-box;
  padding: 2.6667vw 2.1333vw;
  overflow-x: auto;

  .item-box {
    .bg('viewAllWorkOrders/tab_fl2_no.png');
    width: 24vw;
    height: 16vw;
    margin-right: 2.1333vw;
    box-sizing: border-box;
    justify-content: center;
  }
  .item-icon {
    width: 6.4vw;
    height: 6.4vw;
  }
  .current-card {
    .bg('viewAllWorkOrders/tab_fl1_pr.png');
    .item-label {
      color: #2c69dd;
    }
  }
}
</style>